<template>

    <div>
        <div class="demo-image__lazy">
            <el-image v-for="url in urls" :key="url" :src="url" lazy />
            <el-backtop visibility-height="0" :right="100" :bottom="100" />
        </div>
    </div>

</template>
<script>
import { useRouter } from "vue-router"
import { getDrawAllImages } from '@/util/service.js'
import { ref, onMounted } from 'vue'
export default {
    name: 'works_draw',
    setup() {
        const urls = ref([
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
            'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
            'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
            'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]);

        // const loadImages = async () => {
        //     try {
        //         const response = await getDrawAllImages()
        //         this.images = response.map(imageData => `data:image/jpeg;base64,${imageData}`)
        //     } catch (error) {
        //         console.error('获取图片数据失败：', error)
        //     }
        // }

        // onMounted(loadImages);

        return { urls };
    }
}
</script>
<style scoped>
.demo-image__lazy {
    height: 800px;
    overflow-y: auto;
    border-radius: 10px;
}

.demo-image__lazy .el-image {
    display: block;
    min-height: 200px;
    margin-bottom: 10px;
}

.demo-image__lazy .el-image:last-child {
    margin-bottom: 0;
}
</style>
